前言

輪播圖片時常在 app 中看到，例如一些購物網站或是選課網站。
今天我們來試著做出自己的輪播圖片吧！！！
大家可以先準備一些圖片。

想到輪播圖片可能會先考慮 ScrollView ，這邊用它來實現也可以，只是客制方面比較麻煩也比較侷限。
我先將圖片各自寫成一個 view ，接著放入 ScrollView 中。

struct scrollHorizon: View {
    var body: some View {
        ScrollView(.horizontal){
            HStack{
                FIrstView()
                SecondView()
                ThirdView(photoName: "choco")
            }
            
        }
    }
}

以上程式碼會有以下效果。

這邊我們先不繼續做下去了，因為我所預想的效果是像是蝦皮廣告頁，有下方的白色透明點點，且會固定在某張圖片。

如果使用 ScrollView 則下方的點點需另外設定且圖片滑動距離也需另外做設定。
我找到一個方便的作法，就是使用 PageTabViewStyle ，在 TabView 中使用 PageTabViewStyle 能使畫面有相似的效果。

成果：

滑動操作

按鈕操作

完整程式碼：

import SwiftUI

struct ScrollTabView: View {
    @State private var count :Int = 1
    @State private var Photoname=""
    var body: some View {
        VStack{
            
            TabView(selection: $count){
                FIrstView()
                    .tag(0)
                SecondView()
                    .tag(1)
                ThirdView(photoName:"choco")
                    .tag(2)
            }.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
                .frame(width: 200,height: 200)
                .cornerRadius(50)
                .shadow(color:.gray,radius: 5,x: 2,y:2)
                .position(x:195,y:150)
            
//btn ui-----------------------------------------------
            HStack{
                Button("Left"){
                    count-=1
                }.onChange(of: count){newCount in
                    if count==(-1){
                        count=2
                    }else{}
                }.padding()

                Button("Right"){
                    count+=1
                }.onChange(of: count){newCount in
                    if count==3{
                        count=0
                    }else{}
                }.padding()

            }.position(x:190,y:-80)
        }
    }
}

這邊解釋一下，使用 tabViewStyle 中的 PageTabViewStyle 便可以直接實現效果。indexDisplayMode:.always可以選擇是否顯示下方點點。

這邊我加上一些 code 達成我自己需要的樣子，一些陰影跟外型...

前面用到 PhotoName 的變數，是為了將圖片 View 元件化以方便使用，只要傳入圖片名稱便能用， code 中只有第三個 View 是使用到的。
第二個變數 count 是為了去偵測 Tab 的 .tag （TabView(selection: $count){}），並透過下方的 Button 做if else 判斷，讓圖片切換到底時回到第一頁，達到按鈕也能切換圖片的效果。

大家可以再將按鈕外觀設計一下～
今天就到這邊啦～
謝謝閱讀～